<template>
	<div class="polluteEventUpload" v-loading="polEventUploading">
		<el-form ref="uploadForm" label-position="left" :model="uploadForm" size="mini"
      style="max-width: 550px;padding-top: 20px;" :rules="uploadFormRules"
    >
      <el-form-item label="水站名称" label-width="110px" prop="station">
        <el-select v-model="uploadForm.station" placeholder="请选择水站名称">
          <p v-for="(item, index) of stationList" :key="index">
            <el-option :label="item" :value="item"></el-option>
          </p>
        </el-select>
      </el-form-item>
      <el-form-item label="时间" label-width="110px"  prop="gmtCreate">
        <el-date-picker
          v-model="uploadForm.gmtCreate"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="12:00:00">
        </el-date-picker>
        <!-- <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="uploadForm.date1" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker placeholder="选择时间" v-model="uploadForm.date2" style="width: 100%;"></el-time-picker>
        </el-col> -->
      </el-form-item>

      <el-form-item label="上报人员" label-width="110px" prop="person">
        <!-- <el-input v-model="uploadForm.person" placeholder="请输入上报人员"></el-input> -->
        <el-select v-model="uploadForm.person" placeholder="请选择上报人员" style="width: 100%;">
          <p v-for="(item, index) of userAdminList.data" :key="index">
            <el-option :label="item.username" :value="item.username" se></el-option>
          </p>
        </el-select>
      </el-form-item>
      <el-form-item label="超标因子" label-width="110px" prop="factor">
        <!-- multiple
        default-first-option -->
        <el-select
          style="width: 100%"
          v-model="uploadForm.factor"
          placeholder="请选择超标因子">
          <el-option
            v-for="item in factorsOption"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="超标企业" label-width="110px" prop="enterprise">
        <!-- <el-input v-model="uploadForm.enterprise" placeholder="请输入超标企业"></el-input> -->
        <el-select v-model="uploadForm.enterprise" placeholder="请选择超标企业" style="width: 100%">
          <p v-for="(citem, cindex) of stationPollutant" :key="cindex">
            <el-option :label="citem.pollutantName" :value="citem.pollutantName"></el-option>
          </p>
        </el-select>
      </el-form-item>
     
      <el-form-item label="超标原因" label-width="110px" prop="reason">
        <el-input
          type="textarea"
          :rows="1"
          placeholder="请输入原因"
          v-model="uploadForm.reason">
        </el-input>
      </el-form-item>
      <el-form-item label="处理结果描述" label-width="110px" prop="description">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入处理结果描述"
          v-model="uploadForm.description">
        </el-input>
      </el-form-item>
      <el-form-item label="上传图片" label-width="110px" style="margin-top: 50px;" prop="files">
        <el-upload
          ref="uploadPhoto"
          action=""
          :file-list="uploadForm.files"
          list-type="picture"
          multiple
          :limit="4"
          :on-change="uploadChange"
          :on-exceed="uploadExceed" 
          :http-request="handleSubmit"
          :auto-upload="false"
        >
          <el-button>点击上传</el-button>
          <span slot="tip" class="uploadTip">照片格式为JPG，PNG</span>
        </el-upload>
      </el-form-item>
      <el-form-item label="备注" label-width="110px">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入备注"
          v-model="uploadForm.remark">
        </el-input>
      </el-form-item>
     
      <el-form-item size="medium">
        <el-button type="primary" @click="onSubmit('uploadForm')" class="greenBtn submitBtn">确定</el-button>
      </el-form-item>
    </el-form>
    <!-- <div class="mHr"></div> -->
	</div>
</template>
<script>
import { mapActions, mapGetters} from "vuex"
export default {
  name: 'polluteEventUpload',
  data () {
    return {
      msg: 'hello polluteEventUpload!',
      polEventUploading: false,
      formData: {},
      uploadForm: {
        station: "",
        gmtCreate: "",
        person: "",
        factor: "",
        enterprise: "",
        reason: "",
        description: "",

        files: [],
        remark: "",
      },
      uploadFormRules: {
        description: [
          { required: true, message: '请输入处理结果描述', trigger: 'blur' },
        ],
        enterprise: [
          { required: true, message: '请输入超标企业', trigger: 'blur' }
        ],
        factor: [
          { required: true, message: '请输入超标因子', trigger: 'blur' }
        ],
        station: [
          { required: true, message: '请选择水站名称', trigger: 'change' }
        ],
        gmtCreate: [
          { type: 'string', required: true, message: '请选择时间', trigger: 'change' }
        ],
        reason: [
          { required: true, message: '请填写超标原因', trigger: 'blur' }
        ],
        person: [
          { required: true, message: '请填写上报人', trigger: 'blur' }
        ],
        files: [
          { required: true, message: '请选择图片', trigger: 'change' }
        ],
      }
		} 
  },
	methods: {
    ...mapActions([
      'postPolluteEvent',
      'fetchWaterStationPollutant',
      'fetchUserList'
    ]),
    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if(valid) {
          this.polEventUploading = true
          this.formData = new FormData()
          let uploadForm = this.uploadForm

          this.$refs.uploadPhoto.submit()
          if(delete uploadForm.files) {
            for(let i in uploadForm) {
              this.loopAppend(this.formData, i, uploadForm[i])
            }
          }
          // debugger
          let result = await this.postPolluteEvent(this.formData)
          if(result.message === 'success'){
            this.$notify({
              type: 'success',
              title: '成功',
              message: result.info
            })
            this.$router.push('/pollute/eventList')
          }else {
            this.$notify({
              type: 'error',
              title: '失败',
              message: result.info
            })
          }
          this.polEventUploading = false
        }else {
          return false;
        }
      })
    },
    uploadChange(file, fileList){
			this.uploadForm.files = fileList
    },
    uploadExceed(files, fileList) {
			this.$notify.warning({
				title: '警告',
				message: '最多上传4张图片',
			})
    },
    handleSubmit(response) {
			this.formData.append('files', response.file)
    },
    loopAppend(formData, key, value) {
      formData.append(key, value)
    }
  },
  async created() {
    this.polEventUploading = true
    await this.fetchWaterStationPollutant()
    await this.fetchUserList({
      account: '',
      role: '',
      pageSize: 99999,
      pageNum: 1
    })
    this.polEventUploading = false
  },
  computed: {
    ...mapGetters({
      stationList: 'getStationList',
      stationPollutant: 'getStationPollutant',
      userAdminList: 'getUserAdminList',
      factorsOption: 'getFactorsOption',
    })
  },
}
</script>
<style scoped>
.polluteEventUpload {
  position: relative;
  background: #fff;
  padding: 0 20px;
  min-height: 100%;
}
.polluteEventUpload .uploadTip {
  margin-left: 15px;
  font-size: 12px;
}
.polluteEventUpload .mHr {
  position: absolute;
  bottom: 38%;
  height: 1px;
  width: 96%;
  border-bottom: 1px dashed #dcdce0;
}
</style>